<template>
  <div>
    <div class="tip-style">{{ title }}</div>
    <input
      :type="inputType"
      :maxlength="maxLength"
      :placeholder="`请输入${title}`"
      oninput="this.value=this.value.replace(/[^a-zA-Z0-9]/g,'');"
      :value="modelValue"
      @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)"
      @keyup.enter="handleEnter"
    />
  </div>
</template>
<script lang="ts" setup name="MyInputView">
import { computed } from 'vue'
//启用时记得补上：v-memo="validValue"
const props = defineProps(['modelValue', 'title'])
const emit = defineEmits(['update:modelValue', 'onEnter'])
// 计算属性：根据title动态设置输入框类型
const inputType = computed(() => {
  return props.title.includes('密码') ? 'password' : 'text'
})
// 计算属性：根据title动态设置最大长度
const maxLength = computed(() => {
  return props.title.includes('密码') ? 30 : 11
})
const handleEnter = () => {
  emit('onEnter') // 触发自定义事件通知父组件
}

// //限制输入（和oninput="this.value=this.value.replace(/[^a-zA-Z0-9]/g,'');" 重复了但保留以便学习）
// const inputValue = ref('')
// const validValue = computed({
//   get() {
//     return inputValue.value
//   },
//   set(newValue) {
//     // 过滤非法字符并限制长度
//     inputValue.value = newValue.replace(/[^a-zA-Z0-9]/g, '').slice(0, 11)
//     log('asfdsafsaf')
//   },
// })
</script>
<style scoped>
input {
  min-width: 55%;
  margin: 15px;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
  border-color: var(--main-color5);
  border-width: 0.5px;
}
input:active {
  border-color: var(--main-color);
}
.tip-style {
  margin-left: 15px;
  font-size: small;
}
</style>
